<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>调试页面</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/sweetalert.css"/>
</head>
<body>
<div class="container" style="margin-top: 20px">
    <div class="row">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#" style="font-size: 34px">
                        DUBBO DEBUGGER
                    </a>
                </div>
            </div>
        </nav>
    </div>
    <div class="row">
        <div class="col-md-8" style="font-size: 26px;font-weight: bold">
            接口：<span class="label label-success"
                     th:text="${name}">com.seewo.dubbo.debugger.sample.api.UserService</span>
        </div>

        <div class="col-md-3" style="font-size: 20px;font-weight: bold">
            <a th:href="@{'/base/markdown?cServiceId='+${serviceId}+'&cName='+${name}}">下载文档</a>
        </div>
    </div>

    <div class="row" style="margin-top: 15px">
        <div class="col-md-10">
            <div class="input-group">
                <span class="input-group-addon" id="basic-addon1">描述</span>
                <input type="text" class="form-control" aria-describedby="basic-addon1" id="desc"
                       style="font-weight: bold" th:value="${desc}">
                <input type="hidden" id="interfaceId" th:value="${interfaceId}">
            </div>
        </div>
        <div class="col-md-2">
            <button class="btn" id="updateDesc" type="button" data-loading-text="update...">
                提交修改
            </button>
        </div>

    </div>
    <div style=" border: solid; margin-top: 15px;height: 1000px;    border-width: 0 2px;border-right-width: 0; border-color: #a2a2a2 #b0b0b0;   padding-left: 5px; color: #333333">
        <div class="row" style="height: max-content; ">

            <div class="col-md-3">
                <div class="list-group" th:with="size=${methods.size()}">
                    <a class="list-group-item" th:each="method,methodStat: ${methods}"
                       th:href="@{'/page/api?cName='+${method.getCName()}+'&cInterfaceId='+${interfaceId}}" target="api"
                       th:id="${'method'+methodStat.index}"
                       th:onclick="'javascript:active('+${methodStat.index}+','+${size}+')'">
                        <h4 class="list-group-item-heading" th:text="${method.getCDesc()}">List group item heading</h4>
                        <p class="list-group-item-text" style="overflow: hidden" th:text="${method.getCName()}">
                            ..aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.</p>
                    </a>
                </div>
            </div>

            <div class="col-md-9">
                <iframe name="api" scrolling="auto" width="100%" height="1000px"></iframe>
            </div>


        </div>
    </div>



</div>
</body>
<script type="text/javascript" src="/js/sweetalert.min.js"></script>
<script>
    $("#updateDesc").bind("click", function () {
        const $btn = $(this).button('loading');
        const interfaceId = $("#interfaceId").val();
        const desc = $("#desc").val();
        const data = {
            cId: interfaceId,
            cDesc: desc
        };
        $.ajax({
            url: '/base/interface/desc',
            type: 'PUT',
            dataType: 'json',
            contentType: 'application/json',
            data: JSON.stringify(data),
            success: function (data) {
                $btn.button('reset');
                if (data.flag) {
                    swal("操作成功!", "已成功修改！", "success");
                } else {
                    swal("更新失败!请稍后重试");
                }
            }
        });

    });

    function active(n, size) {
        for (let i = 0; i < size; i++) {
            $('#method' + i).removeClass("active");
        }
        $('#method' + n).addClass("active");
    }
</script>
</html>